<div class="properties-centent kk-checkbox">
  <!-- <div class="head-title">
    表单属性设置
  </div> -->
  <div class="properties-body">
    <!-- <div> -->
      <div class="preview-width">
        <span>预览宽度：</span>
        <nz-input-number [(ngModel)]="config.previewWidth"></nz-input-number>
      </div>
      <div class="table-layout" *ngIf="config.layout != 'undefined'">
        <span>
          表单布局：
        </span>
        <div>
          <nz-radio-group [(ngModel)]="config.layout">
            <label nz-radio-button nzValue="horizontal">水平</label>
            <label nz-radio-button nzValue="vertical">垂直</label>
            <label nz-radio-button nzValue="inline">行内</label>
          </nz-radio-group>
        </div>
      </div>
      <hr>
      <div>
        <label>
          标签布局（水平布局生效）：
        </label>
        <div>
          <nz-radio-group [(ngModel)]="config.labelLayout">
            <label nz-radio-button nzValue="flex">固定</label>
            <label nz-radio-button nzValue="Grid">栅格</label>
          </nz-radio-group>
        </div>
      </div>
      <hr>
      
      <div class="label-width" [hidden]="config.labelLayout !== 'flex'">
        <label>
          标签宽度(px)：
        </label>
        <div>
          <nz-input-number [(ngModel)]="config.labelWidth"></nz-input-number>
        </div>
      </div>
      <div [hidden]="config.labelLayout !== 'Grid'">
        <label>
          labelCol:
        </label>
        <div>
          <nz-slider
            nzMax="24" nzMin="0"
            [(ngModel)]="config.labelCol.xs"
            (ngModelChange)="handleChangeCol($event)"
          ></nz-slider>
          <div *ngIf="simpleSize">
            <label></label>
            <nz-input-number [ngModel]="config.labelCol.xs" (ngModelChange)="handleChangeLabelCol($event)"></nz-input-number>
          </div>
          <ng-container *ngIf="!simpleSize">
            <div>
              <label>xs:</label>
              <nz-input-number [(ngModel)]="config.labelCol.xs" ></nz-input-number>
            </div>
            <div>
              <label>sm:</label>
              <nz-input-number [(ngModel)]="config.labelCol.sm" ></nz-input-number>
            </div>
            <div>
              <label>md:</label>
              <nz-input-number [(ngModel)]="config.labelCol.md" ></nz-input-number>
            </div>
            <div>
              <label>lg:</label>
              <nz-input-number [(ngModel)]="config.labelCol.lg" ></nz-input-number>
            </div>
            <div>
              <label>xl:</label>
              <nz-input-number [(ngModel)]="config.labelCol.xl" ></nz-input-number>
            </div>
            <div>
              <label>xxl:</label>
              <nz-input-number [(ngModel)]="config.labelCol.xxl" ></nz-input-number>
            </div>
          </ng-container>
        </div>
      </div>
      <div [hidden]="config.labelLayout !== 'Grid'">
        <label>
          wrapperCol（水平布局生效）
        </label>
        <div>
          <div *ngIf="simpleSize">
            <label></label>
            <nz-input-number [ngModel]="config.wrapperCol.xs" (ngModelChange)="handleChangeWrapperCol($event)"></nz-input-number>
          </div>
          <ng-container *ngIf="!simpleSize">
            <div>
              <label>xs:</label>
              <nz-input-number [(ngModel)]="config.wrapperCol.xs" ></nz-input-number>
            </div>
            <div>
              <label>sm:</label>
              <nz-input-number [(ngModel)]="config.wrapperCol.sm" ></nz-input-number>
            </div>
            <div>
              <label>md:</label>
              <nz-input-number [(ngModel)]="config.wrapperCol.md" ></nz-input-number>
            </div>
            <div>
              <label>lg:</label>
              <nz-input-number [(ngModel)]="config.wrapperCol.lg" ></nz-input-number>
            </div>
            <div>
              <label>xl:</label>
              <nz-input-number [(ngModel)]="config.wrapperCol.xl" ></nz-input-number>
            </div>
            <div>
              <label>xxl:</label>
              <nz-input-number [(ngModel)]="config.wrapperCol.xxl" ></nz-input-number>
            </div>
          </ng-container>
        </div>
      </div>

      <div class="label-width">
        <label>
          表单css：
        </label>
      </div>
      <div class="label-width">
        <textarea rows="4" nz-input [(ngModel)]="config.customStyle"></textarea>
      </div>
    <!-- </div> -->
  </div>
</div>
